import React from 'react';
import { Menu } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
import type { MenuProps } from 'antd';
import './BaseSide.css';

const menuItems: MenuProps['items'] = [
  { label: 'API', key: '/' },
  { label: 'BLOCK', key: '/block' },
];

const BaseSide: React.FC<{ className?: string }> = ({ className = '' }) => {
  const navigate = useNavigate();
  const location = useLocation();

  return (
    <Menu
      mode="inline"
      selectedKeys={[location.pathname]}
      onClick={({ key }) => key !== location.pathname && navigate(key)}
      items={menuItems}
      className={className}
      style={{ height: '100%', borderRight: 0 }}
    />
  );
};

export default BaseSide;
